<template>
	<view class="container">
		<view class="tui-searchbox">
			<view class="tui-search-input">
				<!-- #ifdef APP-PLUS || MP -->
				<icon type="search" :size="13" color="#333"></icon>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view><tui-icon name="search" :size="16" color="#333"></tui-icon></view>
				<!-- #endif -->
				<input
					confirm-type="search"
					:placeholder="showHotKey"
					:focus="true"
					auto-focus
					placeholder-class="tui-input-plholder"
					class="tui-input"
					v-model.trim="key"
					@confirm="toSearch"
				/>
				<!-- #ifdef APP-PLUS || MP -->
				<icon type="clear" :size="13" color="#bcbcbc" @tap="cleanKey" v-show="key"></icon>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view @tap="cleanKey" v-show="key"><tui-icon name="close-fill" :size="16" color="#bcbcbc"></tui-icon></view>
				<!-- #endif -->
			</view>
			<view class="tui-cancle" @tap="back">取消</view>
		</view>

		<view class="tui-search-history" v-if="history.length > 0">
			<view class="tui-history-header">
				<view class="tui-search-title">搜索历史</view>
				<tui-icon name="delete" :size="14" color="#333" @tap="openActionSheet" class="tui-icon-delete"></tui-icon>
			</view>
			<view class="tui-history-content">
				<block v-for="(item, index) in history" :key="index">
					<tui-tag type="gray" @tap="toSearchPage(item)"  shape="circle">{{ item }}</tui-tag>
				</block>
			</view>
		</view>

		<view class="tui-search-hot">
			<view class="tui-hot-header"><view class="tui-search-title">大家正在搜</view></view>
			<view class="tui-hot-content">
				<block v-for="(item, index) in hot" :key="index">
					<tui-tag type="gray" @tap="toSearchPage(item.content)" shape="circle">{{ item.content }}</tui-tag>
				</block>
			</view>
		</view>
		<tui-actionsheet :show="showActionSheet" :tips="tips" :item-list="itemList"
		 @click="itemClick" @cancel="closeActionSheet"></tui-actionsheet>
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import tuiIcon from '@/components/icon/icon';
import tuiTag from '@/components/tag/tag';
import tuiActionsheet from '@/components/actionsheet/actionsheet';
export default {
	computed: mapState(['historyStr']),
	components: {
		tuiIcon,
		tuiTag,
		tuiActionsheet
	},
	onLoad() {
		if (this.historyStr != '') {
			this.history = this.historyStr.split(',').reverse();
		}
		this.getHotSearchList();
	},
	data() {
		return {
			history: [],
			hot: [],
			key: '',
			showActionSheet: false,
			showHotKey:'',
			tips: '确认清空搜索历史吗？',
			itemList:[{
				text: "确定",
				color: "#e53a37"
			}]
		};
	},
	methods: {
		...mapMutations(['setHistoryStr']),
		// 获取首页数据
		getHotSearchList() {
			//参数
			let postData = {};
			this.tui
				.request(this.$api.getHotSearchList, postData, 'POST', false, false)
				.then(res => {
					// 如是下拉刷新则待请求完成提示刷新成功
					if (res.code == 0) {
						this.hot = res.data;
						this.showHotKey='大家都在搜：'+this.hot[0].content;
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		toSearch() {
			// 保存本地的搜索记录
			if (this.historyStr.indexOf(this.key) < 1) {
				if ((this.historyStr == '')) {
					this.setHistoryStr(this.key);
				}else{
					this.setHistoryStr(this.historyStr + ',' + this.key);
				}
				// console.log('this.historyStr=' + this.historyStr);
			}
			this.toSearchPage(this.key);
		},
		toSearchPage(key){
			uni.navigateTo({
				url: '/pages/act/search-classify-list?key=' + key
			});
		},
		back: function() {
			uni.navigateBack();
		},
		cleanKey: function() {
			this.key = '';
		},
		closeActionSheet: function() {
			this.showActionSheet = false;
		},
		openActionSheet: function() {
			this.showActionSheet = true;
		},
		itemClick: function(e) {
			let index = e.index;
			if (index == 0) {
				this.showActionSheet = false;
				this.history = [];
				this.setHistoryStr('');
			}
		}
	}
};
</script>

<style>
page {
	color: #333;
	background: #fff;
}

.container {
	padding: 0 30upx 30upx 30upx;
	box-sizing: border-box;
}

.tui-searchbox {
	padding: 30upx 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.tui-search-input {
	width: 100%;
	height: 66upx;
	border-radius: 35upx;
	padding: 0 30upx;
	box-sizing: border-box;
	background: #f2f2f2;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

.tui-input {
	flex: 1;
	color: #333;
	padding: 0 16upx;
	font-size: 28upx;
}

.tui-input-plholder {
	font-size: 28upx;
	color: #b2b2b2;
}

.tui-cancle {
	color: #888;
	font-size: 28upx;
	padding-left: 30upx;
	flex-shrink: 0;
}

.tui-history-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30upx 0;
}

.tui-icon-delete {
	padding: 10upx;
}

.tui-search-title {
	font-size: 28upx;
	font-weight: bold;
}

.tui-hot-header {
	padding: 30upx 0;
}

.tui-tag-class {
	display: inline-block;
	margin-bottom: 20upx;
	margin-right: 20upx;
	font-size: 26upx !important;
}
</style>
